import React, { FC, useEffect } from "react";
import { Outlet } from "react-router-dom";
import style from "./MainLayout.module.scss";
import { Layout, Spin } from "antd";
import Logo from "../components/Logo";
import UserInfo from "../components/UserInfo";
import useGetUserData from "../hooks/useGetuserData";
import useNavPage from "../hooks/useNavPage";

export default function MainLayout() {
  console.log("进入main layout页面");
  const { Header, Footer, Sider, Content } = Layout;
  const { waitingUserData } = useGetUserData();
  console.log(waitingUserData, "mainLayout -- 13");
  useNavPage(waitingUserData);
  // useEffect(() => {
  // }, []);

  // debugger
  return (
    <Layout>
      <Header className={style.header}>
        <div className={style.left}>
          <Logo />
        </div>
        <div className={style.right}>
          <UserInfo />
        </div>
      </Header>
      <Content className={style.main}>
        {/* 根据用户信息接口调用情况展示插槽中内容 */}
        {waitingUserData ? (
          <div style={{ textAlign: "center", marginTop: "60px" }}>
            <Spin />
          </div>
        ) : (
          <Outlet />
        )}
      </Content>
      <Footer className={style.footer}>鸣远问卷&copy;Created by 迂幵</Footer>
    </Layout>
  );
}
